<?php

namespace App\NaiveUI;

use LowCode\UI;
use LowCode\UI\Node;

class Chart
{
    /**
     * @return Node
     */
    public static function example(): Node
    {
        return UI::div([
            Chart::overview(),
            Chart::chartsTabs(),
            Chart::chartCard(),
        ])->class("p-5 flex-1 w-full");
    }

    public static function overview(): Node
    {
        $analysisOverview = UI::analysisOverview();
        $analysisOverview->item("用户量",2000,"总用户量", 120000,"svg:card");
        $analysisOverview->item("访问量",20000,"总访问量", 500000,"svg:cake");
        $analysisOverview->item("下载量",8000,"总下载量", 120000,"svg:download");
        $analysisOverview->item("使用量",5000,"总使用量", 50000,"svg:bell");
        return $analysisOverview;
    }
    public static function chartsTabs(): Node
    {
        $analysisChartsTabs = UI::analysisChartsTabs();
        $analysisChartsTabs->tab("流量趋势",self::option1());
        $analysisChartsTabs->tab("月访问量",self::option2());
        return $analysisChartsTabs->class('my-5');
    }

    public static function option1(): Node
    {
        $rangeArr = range(100, 80000);
        $xAxisData = [];
        for ($index = 0; $index<18; $index++){
            $num = $index + 6;
            $xAxisData[] = "$num:00";
        }
        $options = [
            'grid'=>[
                'bottom'=>0,
                'containLabel'=>true,
                'left'=>'1%',
                'right'=>'1%',
                'top'=>'2%',
            ],
            'series'=>[
                [
                    'areaStyle'=>[],
                    'data'=> [111, 2000, 6000, 16000, 33333, 55555, 64000, 33333, 18000, 36000, 70000, 42444, 23222, 13000, 8000, 4000, 1200, 333, 222, 111],
//                    'data'=> array_rand($rangeArr, 20),
                    'itemStyle'=>[
                        'color'=>'#5ab1ef'
                    ],
                    'smooth'=>true,
                    'type'=>'line'
                ],
                [
                    'areaStyle'=>[],
                    'data'=> [33, 66, 88, 333, 3333, 6200, 20000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390, 198, 60, 30, 22, 11],
//                    'data'=> array_reverse(array_rand($rangeArr, 20)),
                    'itemStyle'=>[
                        'color'=>'#019680'
                    ],
                    'smooth'=>true,
                    'type'=>'line'
                ]
            ],
            'tooltip'=>[
                'axisPointer'=>[
                    'lineStyle'=>[
                        'color'=>'#019680',
                        'width'=>1,
                    ]
                ],
                'trigger'=>'axis'
            ],
            'xAxis'=>[
                'axisTick'=>['show'=>false],
                'boundaryGap'=> false,
                'data'=> $xAxisData,
                'splitLine'=>[
                    'lineStyle'=>[
                        'type'=>'solid',
                        'width'=>1,
                    ]
                ],
                'type'=>'category'
            ],
            'yAxis'=>[
                [
                    'axisTick'=>['show'=>false],
                    'max'=> 80000,
                    'splitArea'=>['show'=>true],
                    'splitNumber'=> 4,
                    'type'=>'value'
                ]
            ]
        ];
        return UI::chart($options);
    }
    public static function option2(): Node
    {
        $rangeArr = range(100, 80000);
        $xAxisData = [];
        for ($index = 0; $index<12; $index++){
            $num = $index + 1;
            $xAxisData[] = "{$num}月";
        }
        $options = [
            'grid'=>[
                'bottom'=>0,
                'containLabel'=>true,
                'left'=>'1%',
                'right'=>'1%',
                'top'=>'2%',
            ],
            'series'=>[
                [
                    'data'=> [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
                    'smooth'=>true,
                    'type'=>'bar'
                ]
            ],
            'tooltip'=>[
                'axisPointer'=>[
                    'lineStyle'=>[
                        'width'=>1,
                    ]
                ],
                'trigger'=>'axis'
            ],
            'xAxis'=>[
                'data'=> $xAxisData,
                'type'=>'category'
            ],
            'yAxis'=>[
                'max'=> 8000,
                'splitNumber'=> 4,
                'type'=>'value'
            ]
        ];
        return UI::chart($options);
    }

    public static function chartCard(): Node
    {
        $options1 = [
            'legend'=>['bottom'=>0,'data'=>['访问', '趋势']],
            'radar'=>[
                'indicator'=>[
                    ['name'=> '网页'],
                    ['name'=> '移动端'],
                    ['name'=> 'Ipad'],
                    ['name'=> '客户端'],
                    ['name'=> '第三方'],
                    ['name'=> '其它'],
                ],
                'radius'=>"60%",
                'splitNumber'=>8,
            ],
            'series'=>[
                [
                    'areaStyle'=> [
                        'opacity'=>1,
                        'shadowBlur'=>0,
                        'shadowColor'=>"rgba(0,0,0,.2)",
                        'shadowOffsetX'=>0,
                        'shadowOffsetY'=>10,
                    ],
                    'data'=> [
                        [
                            'itemStyle'=>['color'=>'#b6a2de'],
                            'name'=>'访问',
                            'value'=>[90, 50, 86, 40, 50, 20],
                        ],
                        [
                            'itemStyle'=>['color'=>'#5ab1ef'],
                            'name'=>'趋势',
                            'value'=>[70, 75, 70, 76, 20, 85],
                        ]
                    ],
                    'itemStyle'=>[
                        'borderRadius'=>10,
                        'borderWidth'=>2,
                    ],
                    'symbolSize'=>true,
                    'type'=>'radar'
                ]
            ],
            'tooltip'=>[]
        ];
        $options2 = [
            'legend'=>['bottom'=>'2%','left'=>'center'],
            'series'=>[
                [
                    'animationDelay'=>'exponentialInOut',
                    'animationEasing'=>'exponentialInOut',
                    'animationType'=>'scale',
                    'avoidLabelOverlap'=>'false',
                    'color'=>['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
                    'data'=>[
                        [ 'name'=>'搜索引擎', 'value'=>1048 ],
                        [ 'name'=>'直接访问', 'value'=>735 ],
                        [ 'name'=>'邮件营销', 'value'=>580 ],
                        [ 'name'=>'联盟广告', 'value'=>484 ],
                    ],
                    'emphasis'=>[
                        'label'=>[
                            'fontSize'=>'12','fontWeight'=>'bold','show'=>true,
                        ]
                    ],
                    'label'=>[
                        'position'=>'center','show'=>false,
                    ],
                    'labelLine'=>['show'=>false],
                    'name'=>'访问来源',
                    'radius'=>'80%',
                    'roseType'=>'radius',
                    'type'=>'pie',
                ]
            ],
            'tooltip'=>['trigger'=>'item']
        ];
        $options3 = [
            'series'=>[
                [
                    'animationDelay'=>'exponentialInOut',
                    'animationEasing'=>'exponentialInOut',
                    'animationType'=>'scale',
                    'color'=>['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
                    'data'=>[
                        [ 'name'=>'技术支持', 'value'=>274 ],
                        [ 'name'=>'定制', 'value'=>310 ],
                        [ 'name'=>'远程', 'value'=>400 ],
                        [ 'name'=>'外包', 'value'=>500 ],
                    ],
                    'name'=>'商业占比',
                    'radius'=>['40%', '65%'],
                    'roseType'=>'radius',
                    'type'=>'pie',
                ]
            ],
            'tooltip'=>['trigger'=>'item']
        ];
        $card1 = UI::analysisChartCard("访问数量", UI::chart($options1))->class("mt-5 md:mr-4 md:mt-0 md:w-1/3");
        $card2 = UI::analysisChartCard("访问来源", UI::chart($options2))->class("mt-5 md:mr-4 md:mt-0 md:w-1/3");
        $card3 = UI::analysisChartCard("访问来源", UI::chart($options3))->class("mt-5 md:mt-0 md:w-1/3");
        return UI::div([
            $card1,
            $card2,
            $card3
        ])->class("mt-5 w-full md:flex");

    }
}
